<template>
  <div class="departments-container">
    <el-card>
      <!-- 组织结构标题开始 -->
      <tree-tool :tree-node="company" :is-root="true" />
      <!-- 组织结构标题结束 -->

      <!-- 树形结构开始 -->
      <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
        <!-- 用data 传入内容， 插槽内容有多少个就会循环多少个 -->
        <!-- 作用域插槽用法 slot-scope="obj" 结束传递给插槽的数据
        data 每个节点的数据对象 -->
        <tree-tool slot-scope="{ data }" :tree-node="data" @delpart="getDepartmentsInfo" @addpart="addDeprts" @editpart="editDeprts" />
        // @delpart 监听子组件事件，触发后，重新获取组织结构
      </el-tree>
      <!-- 树形结构结束 -->
    </el-card>
    <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartmentsInfo" />
  </div>
</template>
<script>
import treeTool from './components/tree-tool.vue'
import addDept from './components/add-dept.vue'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'

export default {
  components: { treeTool, addDept },
  data() {
    return {
      company: {},
      departs: [],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      showDialog: false, // 默认不显示
      node: null,
      loading: false // 用来控制进度条弹窗的显示与隐藏
    }
  },
  created() {
    this.getDepartmentsInfo() // 调用自身定义的函数，获取组织结构数据
  },
  methods: {
    async getDepartmentsInfo() {
      this.loading = true
      const res = await getDepartments()
      this.company = { name: res.companyName, manager: '负责人', id: '' }
      this.departs = tranListToTreeData(res.depts, '') // 将其转换为树形结构
      this.loading = false
    },
    addDeprts(node) {
      this.showDialog = true // 显示弹窗
      // 因为node 是当前点击的部门，此时这个部门应该记录下来
      this.node = node
    },
    editDeprts(node) {
      this.showDialog = true
      this.node = node
      // 在这个地方调用 子组件的方法
      // 父组件 调用 子组件 的方法
      console.log('123')
      this.$refs.addDept.getDepartDetail(node.id)
    }
  }
}

</script>
<style lang="scss" scoped>
.departments-container {
  .tree-card {
    padding: 30px  140px;
    font-size: 14px;
  }
  .el-tree {
    padding: 30px  140px;
    font-size: 14px;
  }
}
</style>
